<template>
  <div>
    <div>
      <a-space>
        <template v-if="!formInfo.editable">
          <a-button
            size="small"
            v-if="buttons.edit"
            @click="onClickCRUD('edit')"
          >
            编辑
          </a-button>
          <!-- <a-button
            v-if="buttons.create"
            size="small"
            type="primary"
            @click="onClickCRUD('new')"
          >
            {{ viewActions.create }}
          </a-button> -->

          <a-popconfirm
            v-if="buttons.delete"
            title="delete ?"
            ok-text="ok"
            cancel-text="cancel"
            @confirm="onClickDelConfirm"
          >
            <a-button size="small" danger> 删除 </a-button>
          </a-popconfirm>

          <a-button size="small" type="primary" @click="goBack">
            返回
          </a-button>
        </template>

        <template v-if="formInfo.editable">
          <a-button size="small" @click="onClickSave"> 保存 </a-button>
          <a-button size="small" @click="onClickCancel"> 取消 </a-button>
        </template>
      </a-space>
    </div>

    <a-divider />
    <FormSheet
      ref="editRef"
      :model="record_edit"
      :sheet="sheet"
      :formInfo="formInfo"
      @change="onChange"
    />
  </div>
</template>

<script setup>
import FormSheet from './FormSheet.vue'
import { useFormView } from './formApi'

import { ref } from 'vue'

import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps(['actionId', 'resId'])

const useData = useFormView(props)

const { buttons, formInfo, sheet, record_edit } = useData
const { onClickCRUD, onChange } = useData

const editRef = ref()

async function onClickDelConfirm() {
  const res = await onClickCRUD('del')
  if (res) {
    const rounteVal = router.currentRoute.value
    const { query, path } = rounteVal
    const { menu, action } = query
    const query2 = { menu, action, view_type: 'tree' }
    router.push({ path, query: query2 })
  }
}

async function onClickSave() {
  function validate(done) {
    editRef.value.validate().then(
      () => done(true),
      () => done(false)
    )
  }

  const id_ret = await onClickCRUD('save', validate)
  console.log(id_ret)
  if (id_ret) {
    const rounteVal = router.currentRoute.value
    const { query, path } = rounteVal
    const { menu, action } = query
    const query2 = { menu, action, view_type: 'form', id: id_ret }
    router.push({ path, query: query2 })
  }
}

async function onClickCancel() {
  editRef.value.resetFields()
  const res = await onClickCRUD('cancel')

  if (res) {
    const rounteVal = router.currentRoute.value
    const { query, path } = rounteVal
    const { menu, action } = query
    const query2 = { menu, action, view_type: 'tree' }
    router.push({ path, query: query2 })
  }
}

function goBack() {
  const rounteVal = router.currentRoute.value
  const { query, path } = rounteVal

  const { menu, action } = query
  const query2 = { menu, action, view_type: 'tree' }
  router.push({ path, query: query2 })
}
</script>
<style scoped></style>
